<template>
	<div class="review-content">
		<div class="head">
			<span class="title">{{ $t('common.check_detail') }}</span>
			<div class="right-btn">
				<el-button plain @click="goBack">
					{{ $t('common.back') }}
				</el-button>
			</div>
		</div>
		<div class="main-content">
			<div class="review-content">
				<el-form label-width="auto">
					<strong>
						{{ $t('operation.feedBack.feedback_member_info') }}
					</strong>
					<el-row>
						<el-col class="space" :span="7">
							{{ $t('common.member_number') }}：{{
								rowData.userName || '-'
							}}
						</el-col>
						<el-col class="space" :span="7">
							{{ $t('common.belong_merchant') }}：
							<span>
								{{ getMerchantName(rowData.merchantId || 0) }}
							</span>
						</el-col>
						<el-col class="space" :span="7">
							{{ $t('common.number_type') }}：
							<span v-if="!!rowData.accountType">
								{{
									typeFilter(
										rowData.accountType,
										'accountType'
									)
								}}
							</span>
						</el-col>
						<el-col class="space" :span="7">
							{{ $t('operation.feedBack.member_tag') }}：{{
								rowData.labelName || '-'
							}}
						</el-col>
						<!-- <el-col class="space" :span="7">
							{{ $t('common.vip_level') }}：{{
								rowData.levelId || rowData.levelId === 0
									? rowData.levelId
									: '-'
							}}
						</el-col> -->
					</el-row>
					<el-divider></el-divider>
					<strong>
						{{ $t('operation.feedBack.feedback_content') }}
					</strong>
					<el-row>
						<el-col class="space" :span="12">
							{{ $t('operation.feedBack.feedback_type') }}：
							<span>{{ problemType }}</span>
						</el-col>
						<el-col class="space" :span="12">
							{{ $t('operation.feedBack.feedback_time') }}：{{
								rowData.createDt || '-'
							}}
						</el-col>
						<el-col
							class="space"
							style="word-break: break-word;"
							:span="16"
						>
							{{ $t('operation.feedBack.feedback_content') }}：{{
								rowData.problemDescribe || '-'
							}}
						</el-col>
					</el-row>
					<el-divider></el-divider>
					<div class="review-flex">
						<div class="img-div">
							<span>
								{{
									$t(
										'operation.feedBack.feedback_upload_img'
									)
								}}：
							</span>
							<img
								v-for="(url, k) in imgUrlArr"
								:key="k"
								:src="url"
								class="detail-img text-link"
								@click="lookGame(url)"
							/>
						</div>
					</div>
				</el-form>
			</div>
		</div>
		<image-viewer
			:visible.sync="imgdDialogVisible"
			:url-list="[bigImage]"
		/>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { mapGetters } from 'vuex'
export default {
	components: {},
	mixins: [list],
	props: {
		problemType: {
			type: String,
			default: ''
		},
		rowData: { type: Object, default: () => ({}) }
	},

	data() {
		return {
			backEnumsList: [],
			imgdDialogVisible: false,
			imgUrlArr: [],
			bigImage: undefined
		}
	},
	computed: {
		...mapGetters(['merchantList'])
	},
	watch: {
		rowData: {
			handler(val) {
				if (val.url) {
					this.imgUrlArr = this.handleImagUrl(val.url)
				}
			},
			immediate: true,
			deep: true
		}
	},
	created() {},
	mounted() {},
	methods: {
		// 获取所属商户name
		getMerchantName(id) {
			return (
				this.merchantList.find((i) => i.id === id)?.merchantName || ''
			)
		},
		lookGame(val) {
			this.imgdDialogVisible = true
			this.bigImage = val
		},
		goBack() {
			this.$emit('back')
		},
		handleImagUrl(url) {
			return typeof url === 'string' ? url.split(',') : []
		}
	}
}
</script>

<style lang="scss" scoped>
.review-flex {
	position: relative;
	width: 100%;
	margin-top: 15px;
	div {
		display: inline-block;
		width: 24%;
	}
}
.detail-img {
	width: 80px;
	height: 80px;
	margin-left: 20px;
	margin-right: 20px;
	display: inline-block;
}
.space {
	line-height: 60px;
}
.img-div {
	width: 100% !important;
}
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
.review-content {
	width: 100%;
	.head {
		height: 70px;
		line-height: 70px;
		width: 100%;
		background: #000;
		border-radius: 2px;
		padding: 0 30px;
		.title {
			font-size: 16px;
			font-weight: 600;
			color: rgb(192, 190, 190);
		}
		.right-btn {
			float: right;
		}
	}
	.main-content {
		.review-content {
			border: 1px solid rgba(192, 190, 190, 0.5);
			border-top: 0px;
			padding: 30px;
			.name {
				font-weight: 600;
			}
			.review-flex {
				position: relative;
				width: 100%;
				margin-top: 10px;
				div {
					display: inline-block;
					width: 24%;
				}
			}
		}
		.more-height {
			height: 200px;
		}
	}
	.img-title {
		margin-top: 10px;
		font-size: 14px;
		font-weight: 600;
		color: rgba(0, 0, 0, 0.847058823529412);
	}
}
</style>
